<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/video.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.8.0/jquery-1.8.0.js"></script>
</head>
<style>

</style>
<body>
    <div class="container">
        <div class="videoWrap">
            <video src="../images/1.mp4" id="video"></video>
            <a class="playControl">
                <img src="../img/playControl.png" alt="">
            </a>
            <div class="blockArea">
                <div class="play">
                    <img src="../img/play.png" alt="">
                </div>
                <div class="cStartTime">
                    <cite class="min">00</cite>:
                    <cite class="sec">00</cite>
                </div>
                <div class="progressBar">
                    <div class="videoTime"></div>
                </div>
                <div class="endTime">
                    <cite class="tMin">00</cite>:
                    <cite class="tSec">00</cite>
                </div>
                <div class="volum">
                    <img src="../img/volume.png" alt="">
                </div>
                <div class="volumProgress">
                    
                </div>
                <div class="fullScreen">
                    <img src="../img/full_screen.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <script>
        var video =document.getElementById('video')
        var totalTime =0
        var progressBarWidth =$('.progressBar').width()
        var percent =0
        var distX =0
        video.addEventListener('loadedmetadata',function () {
            totalTime =video.duration
            formatTime(totalTime)
        },false)

//        进度条处理
        $('.progressBar').on('mousedown',function (e) {
            var clientX =e.pageX()
            console.log(clientX)
            console.log($(this).position().left)
            clearInterval(timer)
            distX =$(this).position().left

        })
        $('.play').on('click',function (e) {
            if(video.paused){
        //   video  未播放 切换播放状态
                video.play()
                $('.playControl img').attr('src','')
                $('.play img').attr('src','../img/pause.png')
                startCountTime()
            }else{
                video.pause()
                clearInterval(timer)
                $('.playControl img').attr('src','../img/playControl.png')
                $('.play img').attr('src','../img/play.png')
            }
        })
        var timer =null
        var i=0
        function    fill_zero_prefix (num) {
            return num < 10 ? '0' + num : num
        };
        function  startCountTime () {
            var that = this
            timer = setInterval(function () {
                i++
                console.log(totalTime)
                if(i>=totalTime){
                    clearInterval(timer)
                    return false
                }else{
                    percent += progressBarWidth/totalTime
                    $('.videoTime').width(percent)
                    $('.sec').html (fill_zero_prefix($('.sec').html() * 1 + 1))
                    console.log($('.sec').html())
                    if ( $('.sec').html() == 59) {
                        $('.min').html(fill_zero_prefix( $('.min').html() * 1 + 1))
                        $('.sec').html( fill_zero_prefix(0))
                    }
                }
            }, 1000)
        }
        function  formatTime(num) {
            var min =Math.floor(parseInt(num)/60)
            var sec = parseInt(num) -min*60
            $('.tMin').html(fill_zero_prefix(min))
            $('.tSec').html(fill_zero_prefix(sec))
            console.log(fill_zero_prefix(min))
        }
    </script>

</body>
</html>